{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <!-- fullCalendar -->
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/fullcalendar/dist/fullcalendar.min.css' %}">
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/fullcalendar/dist/fullcalendar.print.min.css' %}"
          media="print">
    <link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
    <link rel="stylesheet" href="{% static 'cropper/dist/cropper.min.css' %}">

    <style>
        img {
            max-width: 100%;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="ibox-content">
        <button class="btn btn-primary btn-block" data-toggle="modal" data-target="#avatar-modal">
            <b>修改头像</b></button>
    </div>
    {# 上传弹出框 #}
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
         tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="avatar-form" action="{% url 'user_center' %}" enctype="multipart/form-data" method="post">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" type="button">&times;</button>
                        <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
                    </div>
                    <div class="modal-body">
                        <div class="avatar-body">
                            <div id="avatar-upload" class="avatar-upload">
                                <input class="avatar-src" name="avatar_src" type="hidden">
                                <input class="avatar-data" name="avatar_data" type="hidden">
                                <label for="avatarInput">
                                    <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                    <div class="tup btn btn-primary" dir="ltr">
                                        <span class="glyphicon glyphicon-cloud"></span>
                                        上传文件
                                    </div>
                                </label>
                            </div>
                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg"></div>
                                    {#<div class="avatar-preview preview-md"></div>#}
                                    {#<div class="avatar-preview preview-sm"></div>#}
                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-4">
                                    <div class="btn-group">
                                        <button class="btn btn-primary" data-method="rotate" data-option="-90"
                                                type="button"
                                                title="Rotate -90 degrees"><i class="fa fa-undo"></i> 向左旋转
                                        </button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-primary" data-method="rotate" data-option="90"
                                                type="button"
                                                title="Rotate 90 degrees"><i class="fa fa-repeat"></i> 向右旋转
                                        </button>
                                    </div>
                                </div>
                                <div class="col-md-5" style="text-align: right;">
                                    <button class="btn btn-primary fa fa-arrows" data-method="setDragMode"
                                            data-option="move"
                                            type="button" title="移动">
                                    </button>
                                    <button type="button" class="btn btn-primary fa fa-search-plus" data-method="zoom"
                                            data-option="0.1" title="放大图片">
                                    </button>
                                    <button type="button" class="btn btn-primary fa fa-search-minus" data-method="zoom"
                                            data-option="-0.1" title="缩小图片">
                                    </button>
                                    <button type="button" class="btn btn-primary fa fa-refresh" data-method="reset"
                                            title="重置图片">
                                    </button>
                                </div>
                                <div class="col-md-3">
                                    <button id="txiangform" class="btn btn-primary btn-block avatar-save" type="submit">
                                        <i class="fa fa-save"></i> 保存修改
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% csrf_token %}
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script src="{% static 'cropper/dist/cropper.min.js' %}"></script>
{% endblock %}